<!-- 接开单员组件 -->
<template>
  <nut-popup class="workBox" position="bottom" closeable round :style="{ height: '75%' }" @click-close-icon="sendBillPeopleMsg(0)" v-model:visible="props.showRound">
    <nut-cell class="title" :title="props.billType == '1' ? '开单员' : '接单员'"></nut-cell>
    <nut-searchbar v-model="searchValue" placeholder="请输入工号/员工姓名">
      <template #rightout>
        <IconFont @click="search" name="search2"></IconFont>
      </template>
    </nut-searchbar>
    <view class="scrollCon">
      <nut-radio-group v-model="radioVal" class="radioBox">
        <view v-for="item in peopleList" class="radio" @click="handleRadioClick(item)">
          <nut-radio :label="item.STAFF_NO" icon-size="12">
            <view>
              <p class="flex-ld">
                <span class="workNo">工号：{{ item.STAFF_NO }}</span>
                <span class="workRole">{{ item.ROLE_NAME }}</span>
              </p>
              <span class="workName">{{ item.BTS_NAME }}</span>
              <p class="workAddress flex-start">
                <span>原公司：{{ item.COMPANY_NAME }}</span>
                <span>部门：{{ item.COMPANY_NAME }}</span>
              </p>
            </view>
          </nut-radio>
        </view>
      </nut-radio-group>
    </view>
    <nut-empty v-if="emptyShow"  description="无数据请重新搜索"></nut-empty>
    <nut-button class="btn" block type="primary" color="#0966ff" @click="sendBillPeopleMsg(1)">确定</nut-button>
  </nut-popup>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Search2 } from '@nutui/icons-vue-taro'
import { getBtStaffInfo } from '@/@api/wait' // 待确认接口
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'

const props = defineProps<{
  showRound: boolean
  billType: string
}>()

const emit = defineEmits(['sendBillPeopleMsg'])

onMounted(() => {
  initPeopleList() // 获取签单单位信息
})

const searchValue = ref('') // 搜索关键词
const radioVal = ref('') // 选中的label
const customerName = ref('') // 签单单位名称
const STAFF_NO = ref('') // 工号
const ROLE_NAME = ref('') // 角色
const BTS_NAME = ref('') // 姓名
const COMPANY_NAME = ref('') // 原公司/部门

const peopleList = ref<any>([])
const emptyShow = ref(false) // 无数据初始化

const handleRadioClick = (item: any) => {
  console.log(item, 'sss')
  customerName.value = item.customerName
  STAFF_NO.value = item.STAFF_NO // 工号
  ROLE_NAME.value = item.ROLE_NAME // 角色
  BTS_NAME.value = item.BTS_NAME // 姓名
  COMPANY_NAME.value = item.COMPANY_NAME // 原公司/部门
}

// 查询签单列表
async function initPeopleList() {
  let params = {
    branchCompanyNo: Taro.getStorageSync('btStaff').branchCompanyNo,
    keyWord: searchValue.value
  }
  const res = await getBtStaffInfo(params)
  console.log(res, '接开单员列表')
  if (res.data.code == 200) {
    if (res.data.rows.length != 0) {
      peopleList.value = res.data.rows
      emptyShow.value = false
    } else {
      emptyShow.value = true
    }
  } else {
    emptyShow.value = true
  }
}

const search = () => {
  peopleList.value = [] // 置空
  initPeopleList()
}

const sendBillPeopleMsg = (flag) => {
  if (flag) {
    const sendData = {
      STAFF_NO: STAFF_NO.value,
      ROLE_NAME: ROLE_NAME.value,
      BTS_NAME: BTS_NAME.value,
      COMPANY_NAME: COMPANY_NAME.value,
      billType: props.billType
    }
    emit('sendBillPeopleMsg', sendData) // 关闭弹窗传递数据
  } else {
    emit('sendBillPeopleMsg', null) // 关闭弹窗不传递数据
  }
}
</script>

<style lang="scss">
.workBox {
  padding-bottom: 100rpx;
  .title {
      color: #252525;
      font-size: 28rpx;
      font-weight: bold;
    }
  .scrollCon {
    height: 600rpx;
    overflow-y: scroll;
  }
  .flex-ld {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .workNo {
    font-size: 22rpx;
    color: #252525;
  }

  .workRole {
    width: 105rpx;
    padding: 5rpx;
    text-align: center;
    height: 36rpx;
    border-radius: 8rpx;
    color: #0966ff;
    background: #d7e6ff;
    font-size: 22rpx;
  }

  .workName {
    font-size: 28rpx;
    color: #252525;
    font-weight: bold;
  }

  .workAddress {
    font-size: 24rpx;
    color: #666666;
    span {
      margin-right: 10rpx;
    }
  }

  .nut-tabs.vertical .nut-tabs__titles-item.active .nut-tabs__titles-item__line {
    left: 0rpx;
    width: 6rpx;
    background: #0966ff;
  }

  .nut-cell {
    margin: 0;
  }

  .nut-tab-pane {
    padding: 0;
  }

  .nut-radio-group {
    display: block;
  }

  .wareItem {
    width: 550rpx;
    padding: 20rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid #f0f0f0;
    color: #666;
    font-size: 22rpx;
    margin: 0 auto;

    .title {
      color: #252525;
      font-size: 28rpx;
      margin-bottom: 4rpx;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .content {
    }
  }

  .flex_ld {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .btn {
    position: fixed;
    bottom: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 702rpx;
    height: 88rpx;
    border-radius: 200rpx;
  }

  .radioBox {
    width: 702rpx;
    margin: 0 auto;
    padding: 20rpx;
    padding-bottom: 128rpx;
    overflow-y: scroll;

    .radio {
      width: 702rpx;
      padding: 12rpx 0;
      border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
      box-sizing: border-box;
    }

    .font1 {
      font-size: 28rpx;
      color: #252525;
      font-weight: bold;
    }

    .font2 {
      font-size: 22rpx;
      padding: 4rpx;
      background: rgba(255, 143, 31, 0.16);
      border-radius: 10rpx;
    }

    .font3 {
      color: #666666;
      font-size: 24rpx;
      margin: 8rpx auto;
    }

    .font4 {
      font-size: 22rpx;
      padding: 6rpx 10rpx;
      background: rgba(255, 143, 31, 0.16);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-radius: 10rpx;

      .img {
        vertical-align: middle;
        margin-right: 4rpx;
      }
    }

    .bgBlue {
      color: #0966ff;
      background: #d7e6ff;
    }

    .bgOrange {
      color: #ff8f1f;
      background: #ffeddb;
    }

    .bgRed {
      color: #fa5151;
      background: #fee3e3;
    }

    .icon {
      width: 28rpx;
      height: 28rpx;
    }
  }
}
</style>
